30. Exercise: Add Baseline Constraint and Button Chain

Android Developer Documentation:

• Build a UI with Layout Editor
• Constraint Layout

For the final functionality of ColorMyViews, you will do the following:

1. Below the set of boxes, add two TextViews; think of a label and some information. Use different font sizes for the label and text. The solution app only uses one line of text to avoid overlapping views on smaller devices, but you can experiment with a longer string.

2. Add a Baseline Constraint from the label to the info.

3. To situate these TextViews in the layout, add a fixed constraint of 16dp between the label and the info. This assures that they won't overlap, even if their width changes.

4. Constrain the top of info TextView to the bottom of BoxTwo, and use bias to vertically place it in the layout. Also, constrain both TextViews horizontally to the parent.

5. Add a horizontal chain of three buttons constrained to the bottom of the layout. Add any necessary constraints.

6. Test your layout by choosing different devices and orientations. The layout will not work for all of them, but should work for most.

7. Add the code shown below to the click handler. Don't forget to add the buttons to the list of views that are associated with the click handler.

Code to add to click handler:

// Boxes using custom colors for background
   R.id.red_button -> box_three_text.setBackgroundResource(R.color.my_red)
   R.id.yellow_button -> box_four_text.setBackgroundResource(R.color.my_yellow)
   R.id.green_button -> box_five_text.setBackgroundResource(R.color.my_green)

Code for the complete list of views:

val clickableViews: List<View> =
       listOf(box_one_text, box_two_text, box_three_text,
               box_four_text, box_five_text, constraint_layout,
               red_button, green_button, yellow_button)

Here is a screenshot of the finished app.

If you want to start at this step, you can download this exercise code from: Step.03-Exercise-Basline-constraint-Button-chain.

You will find plenty of //TODO comments to help you complete this exercise, and if you get stuck, go back and watch the video again.

Once you’re done, you can check your solution against the solution we’ve provided here Step.03-Solution-Basline-constraint-Button-chain or using this git diff.